<template>
  <div class="wrapper">
    <div class="login">
      <div class="message">实践技能客观化考试设备管理系统</div>
      <div id="darkbannerwrap"></div>
      <form method="post">
        <input type="text" v-model="ruleForm.username" placeholder="输入用户名">
        <hr class="hr15">
        <input type="password" v-model="ruleForm.password" placeholder="输入密码">
        <div id="error" class="el-icon-error" v-show="showMsg"> {{errorMsg}}</div>
        <hr class="hr15">
        <button @click="submitForm()" @keyup.enter="submitForm()" style="width:100%;" type="button">登录</button>
      </form>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import { setCookie,getCookie } from '../../assets/js/cookie.js'
  export default {
    data: function () {
      return {
        showMsg: false,
        errorMsg: '',
        ruleForm: {
          username: '',
          password: '',
        }
      }
    },
    mounted(){
      if(getCookie('token')){
        this.$router.push('/welcome')
      }
    },
    methods: {
      submitForm() {
        const self = this;
        if (self.ruleForm.username == '') {
          self.errorMsg = "请输入用户名";
          self.showMsg = true;
          return false;
        }
        if (self.ruleForm.password == '') {
          self.errorMsg = "请输入密码";
          self.showMsg = true;
          return false;
        }
        self.$axios.post('/api/login', {
          'username': self.ruleForm.username,
          'password': self.ruleForm.password
        }).then(function (res) {
          console.log(res);
          let token = res.headers.authorization
          if (undefined != token) {
            setCookie('token',token,1000*60)
            self.$router.push('/welcome')
          } else {
            self.ruleForm.password = '';
            self.errorMsg = "用户名或密码错误！";
            self.showMsg = true
          }
        })
      }
    }
  }
</script>
<style scoped>
  * {
    font: 13px/1.5 '微软雅黑', Verdana, Helvetica, Arial, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .wrapper {
    background: url(../../assets/background1.jpg) no-repeat center;
    background-size: cover;
  }

  a {
    color: #1ab394;
    text-decoration: none;
    cursor: pointer;
  }

  .login {
    background-color: #f0f0f0e0;
    height: 100%;
    max-width: 450px;
    padding: 40px;
    margin-left: auto;
    margin-right: 0px;
    box-sizing: border-box;
    box-shadow: 0 0 8px 4px #333
  }

  .message {
    margin: 82px 0 0 -58px;
    padding: 18px 10px 18px 60px;
    background: #1ab394;
    position: relative;
    color: #fff;
    font-size: 16px;
  }

  #darkbannerwrap {
    background: url(../../assets/aiwrap.png);
    width: 18px;
    height: 10px;
    margin: 0 0 20px -58px;
    position: relative;
  }

  input[type=text],
  input[type=file],
  input[type=password],
  input[type=email], select {
    border: 1px solid #DCDEE0;
    vertical-align: middle;
    border-radius: 3px;
    height: 50px;
    padding: 0px 16px;
    font-size: 14px;
    color: #555555;
    outline: none;
    width: 100%;
  }

  input[type=text]:focus,
  input[type=file]:focus,
  input[type=password]:focus,
  input[type=email]:focus, select:focus {
    border: 1px solid #1ab394;
  }

  input[type=submit],
  input[type=button],
  button[type=button] {
    display: inline-block;
    vertical-align: middle;
    padding: 12px 24px;
    margin: 0px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    color: #ffffff;
    background-color: #1ab394;
    border-radius: 3px;
    border: none;
    -webkit-appearance: none;
    outline: none;
    width: 100%;
  }

  hr.hr15 {
    height: 15px;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
  }

  hr.hr20 {
    height: 20px;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
  }

  .copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    display: block;
    position: absolute;
    bottom: 15px;
    right: 15px;
  }

  #error {
    clear: both;
    background: #fff0f0;
    border: 1px solid #ffd2d2;
    line-height: 26px;
    margin-top: 10px;
    color: #b74d46;
    width: 100%;
    padding: 0 5px;
    word-break: break-all;
  }
</style>
